<template>
  <div class="request-message">
    <el-avatar :size="55" :src="addMessage.senderAvatar" shape="square"></el-avatar>
    <h5>{{addMessage.senderName}}</h5>
    <span>{{addMessage.content}}</span>
    <em>{{new Date(parseInt(addMessage.sendTime)).toLocaleString()}}</em>
    <div class="button">
      <el-button @click="consent" type="success" size="mini">同意</el-button>
      <el-button @click="refuse" type="danger" size="mini">拒绝</el-button>
    </div>
  </div>
</template>

<script>
  import {deleteAddMsg} from "@/api/message";
  import messageType from "@/utils/message-type";
  import {sendMessage} from "@/websocker";
  import {addFriend} from "@/api/user";
  import {mapGetters} from 'vuex'


  export default {
    name: "RequestMessage",
    props: {
      addMessage: {
        type: Object,
        default() {
          return {}
        }
      },
      index: {
        type: Number,
        default() {
          return -1;
        }
      }
    },
    computed: {
      ...mapGetters([
        'id','name','avatar','phone','signature'
      ]),
      sex(){
        return this.$store.state.user.sex
      }
    },
    methods: {
      // 同意好友请求
      consent() {
        new Promise(resolve => {
          // 发送添加好友请求
          addFriend({
            useridOne: this.addMessage.receiverId,
            useridTwo: this.addMessage.senderId,
          }).then(res => {
            if (res.code === 2000) {
              resolve(res.content.user)
            }
          }).catch(err => {
            console.log(err)
          })
        }).then(user => {
          deleteAddMsg(this.addMessage.id).then(res => {
            res.code === 2000 ?
              this.$store.commit('chat/REMOVE_REQUEST_MESSAGE', this.index) : "";
          })
          this.$store.commit('chat/ADD_FRIEND_LIST', user)
          //// 向对方发送同意通知
          sendMessage({
            receiverId: this.addMessage.senderId,
            content: '<strong>'+this.addMessage.senderName+'</strong>'+'同意了你的好友请求！',
            friend: {
              userid:this.id,
              username:this.name,
              avatar:this.avatar,
              phone:this.phone,
              sex:this.sex,
              signature:this.signature
            },
            form: messageType.SAVE_FRIEND
          })
        });
      },
      // 拒绝添加好友请求
      refuse() {
        deleteAddMsg(this.addMessage.id).then(res => {
          if (res.code === 2000) {
            // 删除消该息
            this.$store.commit('chat/REMOVE_REQUEST_MESSAGE', this.index);
            // 向对方发送拒绝通知
            sendMessage({
              receiverId: this.addMessage.senderId,
              content: '<strong>'+this.addMessage.senderName+'</strong>'+'拒绝了你的好友请求！',
              form: messageType.FRIEND_INFORM
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .request-message {
    position: relative;
    width: 80%;
    height: 90px;
    margin: 0 auto;
    border-bottom: 1px solid #ebebeb;

    &:hover {
      background-color: #d6d9d9;
    }

    .el-avatar {
      position: absolute;
      left: 10px;
      top: 50%;
      margin-top: -25px;
      line-height: 80px;
    }

    h5 {
      position: absolute;
      top: 0;
      left: 75px;
      font-size: 15px;
      font-weight: 400;
    }

    span {
      width: 50%;
      position: absolute;
      bottom: 22px;
      left: 75px;
      font-size: 12px;
      color: #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .button {
      position: absolute;
      right: 10px;
      top: 40px;
    }

    em {
      position: absolute;
      top: 18px;
      right: 15px;
      font-size: 13px;
      font-style: normal;
      color: #b6b0b0;
    }
  }
</style>
